<template>
    <div class="box">
        <div class="header">登录</div>

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field 
                    v-model="username" 
                    name="用户名" 
                    label="用户名" 
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" 
                />
                <van-field 
                    v-model="password" 
                    type="password" 
                    name="密码" 
                    label="密码" 
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" 
                />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button 
                    :disabled="btnFlag"
                    round 
                    block 
                    type="primary" 
                    native-type="submit"
                >
                    提交
                </van-button>
                <van-button
                    @click="$router.push('/register/no1')" 
                    round 
                    block 
                    type="success" 
                    style="margin-top: 10px;"
                >
                    跳转注册
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import type { Ref } from "vue";
import { login } from "@/api/login";
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from "vue-router";

// 创建一个 选项式 API 中的 this.$router
const router = useRouter()

// 存储用户
const username: Ref<string> = ref('')
//存储密码
const password: Ref<string> = ref('')

// 登录事件
async function onSubmit() {
    // console.log('登录');

    //
    const {data} = await login({
        loginname: username.value,
        password: password.value
    })
    if (data.code !== '200') {
        // 提示用户登录失败
        return showFailToast(data.message);
    }

    // 提醒用户登录成功
    showSuccessToast(data.message);

    //跳转第三个页面
    router.push('/')
}

//根据输入框内容控制能否点击按钮
const btnFlag = computed(() => {
    // if (username.value !== '' && password.value !== '') {
    //     return false
    // } else {
    //     return true
    // }
    return !(username.value !== '' && password.value !== '')
})
</script>
